<template>
    <div>
      <h1>房型详情！！！</h1>
      <div>
        <table class="table table-bordered">
          <tbody>
            <tr>
              <td align="right">房型名称</td>
              <td>
                {{ query.typeName }}
              </td>
            </tr>
            <tr>
              <td align="right">单价</td>
              <td>
                {{ query.price }}
              </td>
            </tr>
            <tr>
              <td align="right">房型面积</td>
              <td>
                {{ query.area }}
              </td>
            </tr>
            <tr>
              <td align="right">最多入住人数</td>
              <td>
                {{ query.peoples }}
              </td>
            </tr>
            <tr>
              <td align="right">房型图片</td>
              <td>
                <img :src="query.houseImg" alt="" width="160px" height="100px" v-if="query.houseImg != ''"/>
              </td>
            </tr>
            <tr>
              <td align="right">房型描述</td>
              <td>
                {{ query.desc }}
              </td>
            </tr>
            <tr>
              <td align="right">是否有窗</td>
              <td>
                {{ query.isWin==0?"是":"否" }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      {{ abc.userinfo }}
    </div>
  </template>
  
  <script setup lang="ts">
  import axios from 'axios';
  import moment from 'moment';
  import { ref,reactive,onMounted } from 'vue';
  import { useRoute,useRouter } from 'vue-router';
  const route=useRoute();
  const router=useRouter();
  
  
  import {useUserStore} from '@/stores/user'
  const abc=useUserStore();
  
  let query:any=reactive
  ({
    "houseId":route.query.id,
    "typeName": "",
    "price": "",
    "area": "",
    "peoples": "",
    "houseImg": "",
    "desc": "",
    "isWin": 0
  })
  
  //上传图片
  const img=(e:any)=>
  {
      console.log(e);
      let obj=e.target.files[0];
      let f=new FormData();
      f.append('file',obj);
      axios
      ({
        url:'/api/Img/Photo',
        method:'post',
        data:f
      })
      .then(res=>{
        console.log(res);
        query.houseImg=res.data;
      })
      .catch(err=>{
  
      })
  }
  onMounted(()=>{
    fan();
  })
  const fan=()=>
  {
    axios
    ({
        url:'/api/House/HouseFan',
        method:'get',
        params:
        {
            id:route.query.id
        }
    })
    .then(res=>{
        Object.assign(query,res.data);
    })
    .catch(err=>{

    })
  }
  </script>
  
  <style scoped></style>
  